<template>
<div>
  <el-dialog v-if="enable" :title="title" :visible.sync="enable" width="50%">
    <el-form label-width="150px">
      <template v-for="item in config.params">
        <el-form-item :label="item.label" :key="item.name">
          <el-col :span="19">
            <el-input v-if="'text' == item.type" v-model="model[item.name]" style="width: 100%;"
              :maxlength="undefined == item.maxlength ? null : item.maxlength"
            ></el-input>
            <el-select 
                v-if="'select' == item.type" 
                v-model="model[item.name]"
                :multiple="undefined != item.multiple && true == item.multiple"
                style="width: 100%;"
            ><el-option v-for="option in item.options" :key="option" :label="option" :value="option"></el-option>
            </el-select>
            <el-checkbox v-if="'boolean' == item.type" v-model="model[item.name]"></el-checkbox>
            <el-time-select v-if="'time' == item.type" v-model="model[item.name]"></el-time-select>
            <el-date-picker v-if="'date' == item.type" v-model="model[item.name]" type="date"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1">&nbsp;</el-col>
            <el-col :span="4" v-if="undefined != item.reversable && true == item.reversable ">
              <el-checkbox v-model="model['!'+item.name]">排除</el-checkbox>
            </el-col>
          </el-form-item>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="actionDone">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>
<script>
export default {
    name : 'IptablesParameterEditor',
    data () {
        return {
            title : null,
            config : {},
            enable : false,
            model : {},
            actResolve : null,
            actReject : null,
        };
    },
    methods : {
        /** 设置编辑模型 */
        setModel ( model ) {
            if ( undefined == model ) {
                model = {};
            } else {
                model = JSON.parse(JSON.stringify(model));
            }
            this.model = model;
        },

        /** 编辑 */
        edit() {
            let $this = this;
            return new Promise(( resolve, reject ) => {
                if ( 0 == $this.config.params.length ) {
                    resolve();
                    return;
                }
                
                $this.actResolve = resolve;
                $this.actReject = reject;
                $this.enable = true;
            });
        },

        /** 获取命令字符串 */
        getString() {
            return '';
        },

        /** */
        actionDone() {
            this.enable = false;
            this.actResolve();
        },
    },
}
</script>